<template>
	<view class="wrap">
		<!-- 基础用法，不包含校验规则 -->
		<view class="form">
			<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
				<uni-forms-item label="积分事项" required name="optionId" label-width="80px">
					<uni-data-select v-model="baseFormData.optionId" :localdata="range" @change="change">

					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="积分数" name="integral" required label-width="80px">
					<uni-easyinput v-model="baseFormData.integral" disabled placeholder="请选择积分事项" />
				</uni-forms-item>
				<uni-forms-item label="事项说明" required name="reason" label-width="80px">
					<uni-easyinput type="textarea" v-model="baseFormData.reason" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="凭证上传" required name="name" label-width="80px">
					<view class="pictrueWrap dis">
						<view class='pictrue' v-for="(item,index) in picsPath" :key="index">
							<text class='iconfont icon-guanbi1' @click='DelPic(index)'></text>
							<image :src='item'></image>

						</view>
					</view>

					<view class='pictrue acea-row row-center-wrapper row-column'
						style="margin-top: 10rpx;border: 1px solid;" @click='uploadpic'>
						<text class='iconfont icon-icon25201'></text>
						<view>上传图片</view>
					</view>
					<!-- <uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" /> -->
				</uni-forms-item>

			</uni-forms>
		</view>

		<view class="foot">
			<view class="footMsg" @click="submit('baseForm')">

				确认上传
			</view>

		</view>
<home></home>
	</view>
</template>

<script>
	import home from '@/components/home/index.vue'
	import {
		getIntegralCategory,
		apply
	} from '@/api/togeterRich/family.js'
	export default {
		components:{
			home
			
		},
		data() {
			return {
				value: null,
				range: [],
				rules: {

					optionId: {
						rules: [{
							required: true,
							errorMessage: '请选择'
						}]
					},
					integral: {
						rules: [{
							required: true,
							errorMessage: '请选择积分事项'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					}
				},
				baseFormData: {
					integral: '',
					reason: '',

				},
				pics: [],
				picsPath: [],

			}

		},
		onLoad() {
			this.init()
			uni.hideLoading()
		},
		methods: {
			init() {
				let list = []
				getIntegralCategory().then(res => {

					res.data.map(ress => {
						console.log(ress, 'sddd')
						let data = {
							value: ress.id,
							text: ress.optionName,
							integral: ress.integral
						}
						list.push(data)
					})
					this.range = list

				})
			},
			change(e) {
				console.log(e, 'wosjhiahi')
				if (e != '') {
					this.range.map(res => {
						if (res.value == e) {
							this.baseFormData.integral = res.integral
						}
					})
				} else {
					this.baseFormData.integral = ''
				}


			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					if (this.picsPath.length == 0) {
						uni.showToast({
							title: "请添加图片",
							icon: 'none'
						})
						return;
					}
					res.file = this.picsPath

					// pagesA/family/index
					apply(res).then(reeee => {
						uni.showToast({
							title: "申请成功",
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 2, //返回层数，2则上上页
							})
						}, 2000)


					})
					console.log('success', res);
					// uni.showToast({
					// 	title: `校验通过`
					// })
				}).catch(err => {
					console.log('err', err);
				})
			},
			DelPic: function(index) {
				let that = this,
					pic = this.picsPath[index];
				that.picsPath.splice(index, 1);
				that.pics.splice(index, 1);
			},
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "product",
					pid: 1
				}, function(res) {
					that.pics.push(res.data.url);
					that.picsPath.push(res.data.localPath);
					that.$set(that, 'pics', that.pics);
					that.$set(that, 'picsPath', that.picsPath);
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.foot {
		width: 100%;
		background: #fff;
		padding: 20rpx 0;
		position: fixed;
		bottom: 0;

		.footMsg {
			border-radius: 100rpx;
			color: #fff;
			text-align: center;
			width: 80%;
			margin: 0 auto;
			background: $maincolor;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.wrap {
		.form {
			padding: 40rpx;
		}

		margin: 20rpx auto;
		border-radius: 20rpx;

		background: #fff;

		.pictrueWrap {
			flex-wrap: wrap;
		}

		.pictrue {
			width: 140rpx;
			height: 140rpx;
			margin: 0 0 35rpx 25rpx;
			position: relative;
			font-size: 22rpx;
			color: #bbb;
			border-radius: 14rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>